import { Button, View, Text, Input, Textarea } from "@tarojs/components";
import './index.scss';
import { useEffect, useState } from "react";
import ScoreChecker from "../../components/ScoreChecker";
import Taro, { useRouter } from "@tarojs/taro";
import { IP_NAME } from "../../configProvider/namespace";

const SubmitComment = () => {
  const [score, setScore] = useState<number>();
  const [content, setContent] = useState<string>();
  const [groupId, setGroupId] = useState();
  const [userName, setUserName] = useState();
  const [consultantName, setConsultantName] = useState();
  const route = useRouter();
  const { chatid } = route.params;
  useEffect(() => {
    console.log('chatid', chatid)
    Taro.getStorage({
      key: 'groupID',
      success: (res) => {
        console.log(res.data)
        setGroupId(res.data)
      }
    })
    Taro.getStorage({
      key: 'myInfo',
      success: (res) => {
        setUserName(res.data.name)
      }
    })
    Taro.getStorage({
      key: 'consultant',
      success: (res) => {
        setConsultantName(res.data.name)
      }
    })
    Taro.setStorage({
      key: 'chatId',
      data: ''
    })
    Taro.setStorage({
      key: 'conversationID',
      data: ''
    })
  }, [])
  const selectScore = (value: number) => {
    setScore(value);
  }
  const submit = () => {
    if (!score) {
      Taro.showToast({
        title: '请先打分',
        icon: 'none',
        duration: 2000
      });
      return;
    }
    Taro.request({
      method: 'POST',
      url: `${IP_NAME}/conversation/save_group_msg`,
      data: {
        id: chatid,
        username: userName,
        counselorname: consultantName,
        rating: score,
        comment: content,
        groupid: groupId
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
        Taro.showToast({
          title: '评价成功',
          icon: 'success',
          duration: 1000
        }).then(() => {
          Taro.getStorage({
            key: 'groupID',
            success: (res) => {
              console.log('delete group', res.data)
              Taro.request({
                url: `${IP_NAME}/im/group/delete?group_id=${res.data}`,
                data: {},
                header: {
                  'content-type': 'application/json'
                },
                success: function (res) {
                  console.log(res.data)
                }
              })
            }
          })
          setTimeout(() => {
            Taro.reLaunch({
              url: `../index/index`
            });
          }, 1000)
        })
      }
    })
  }
  return <View>
    <View className="common-title">咨询已结束，请评价</View>
    <View className="common-card input-container">
      <Text className="input-pre">评分：</Text>
      <View>
        <ScoreChecker starSize={'60rpx'} score={score ?? 0} onChangeScore={selectScore} title={''} />
      </View>
      <Text>{score ?? '未评'}分</Text>
    </View>
    <View className="common-card input-container">
      <Text className="input-pre">评价：</Text>
      <Textarea value={content} placeholder="请输入你的评价" className="input" onInput={(e: any) => { setContent(e.target.value) }} />
    </View>
    <Button className="common-button comment-submit-button" onClick={submit}>提交评价</Button>
  </View>
}
export default SubmitComment;
